<template>
<div class="banner">
<swiper :options="swiperOption" >
  <!-- slides -->
  <swiper-slide v-for='item of list' :key='item.id' v-if='list.length>1'>
    <img :src='item.imgUrl'>
  </swiper-slide>
  <!-- Optional controls -->
  <div class="swiper-pagination"  slot="pagination"></div>
</swiper>
</div>
</template>

<script>
export default {
  name: 'Banner',
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner >>> .swiper-pagination-bullet-active
  background-color #fff
.banner
  background #eee
  padding-bottom 30%
  height 0
  overflow hidden
  img
    width 100%
</style>
